<template>
  <div class="_agentFillLoc">
    <van-field
      readonly
      clickable
      name="picker"
      :value="value"
      label="门店"
      placeholder="点击选择门店"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        ref="picker"
        show-toolbar
        value-key="name"
        :columns="shopsList"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <div class="btnCon">
      <van-button style="width:100%" type="info" @click="submit">提交</van-button>
    </div>
  </div>
</template>

<script>
import wxJSFn from "@/js/wxJSFn";
import { Dialog, Picker, Field, Popup, Button } from "vant";
import axios from "axios";
import { mapActions } from "vuex";
import wx from "weixin-js-sdk";
export default {
  components: {
    [Picker.name]: Picker,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Button.name]: Button
  },
  data() {
    return {
      locData: {},
      shopsList: [],
      showPicker: false,
      value: "",
      id: 0,
      addressData: {},
      addressDes: ""
    };
  },
  computed: {
    appData() {
      return this.$store.state.appData;
    }
  },
  watch: {
    appData: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val && val.resQuery && val.jsApiTicket) {
          wx.ready(() => {
            wxJSFn
              .getLocation()
              .then(res => {
                let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                let longitude = res.longitude;
                this.locData.latitude = latitude;
                this.locData.longitude = longitude;
                this.$jsonp("https://apis.map.qq.com/ws/geocoder/v1", {
                  location: `${latitude},${longitude}`,
                  key: "6RHBZ-ZK23X-NQO4H-7FR56-RKILZ-BUF6U",
                  get_poi: 0,
                  output: "jsonp"
                })
                  .then(res2 => {
                    console.log("腾讯坐标描述", res2);
                    if (res2.result) {
                      this.addressDes = res2.result.address;
                    }
                  })
                  .catch(err => {
                    console.log(err);
                  });
              })
              .catch(err => {
                Dialog({ message: "获取位置信息失败，请重新打开页面尝试" });
              });
          });
        }
      }
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    ...mapActions({
      getShopsList: "agent/getShopsList",
      updateAddress: "agent/updateAddress"
    }),
    getList() {
      this.getShopsList()
        .then(res => {
          console.log(res);
          let arr = [];
          res.data.forEach(e => {
            arr.push({
              id: e.id,
              ...JSON.parse(e.addressData)
            });
          });
          this.shopsList = arr;
        })
        .catch(err => {
          console.log(err);
        });
    },
    submit() {
      if (!this.value) {
        Dialog({ message: "请选择门店" });
        return;
      }
      if (!this.locData.longitude) {
        Dialog({ message: "获取位置信息失败，请重新打开页面" });
        return;
      }
      this.updateAddress({
        id: this.id,
        addressData: JSON.stringify(this.addressData)
      })
        .then(res => {
          console.log(res);
          if (res.code == "000000") {
            Dialog({ message: "操作成功" });
          } else {
            Dialog({ message: "操作失败" });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onConfirm() {
      this.showPicker = false;
      let values = this.$refs.picker.getValues();
      console.log(values);
      this.value = values[0].name;
      this.id = values[0].id;
      this.addressData = {
        name: values[0].name,
        dealer: values[0].dealer,
        phone: values[0].phone,
        longitude: this.locData.longitude,
        latitude: this.locData.latitude,
        address: values[0].address,
        addressDes: this.addressDes
      };
    }
  }
};
</script>

<style lang="scss" scoped>
._agentFillLoc {
  min-height: 100vh;
  background-color: white;
  .btnCon {
    padding: 24px;
  }
}
</style>